<template>
  <div class="approvalList">
    <el-card>
      <el-tabs v-model="activeName">
        <!-- 全部 -->
        <el-tab-pane class="name" label="全部" name="first">
          <!-- 审批类型 -->
          <div class="type">
            <strong>审批类型：</strong>
            <el-radio-group v-model="type">
              <el-radio
                v-for="item in typeList"
                :key="item.id"
                v-model="content"
                :label="item.key"
                @change="changeOption"
              >{{ item.name }}</el-radio>
            </el-radio-group>
          </div>
          <!-- 审批状态 -->
          <div class="state">
            <strong>审批状态：</strong>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="审批中">审批中</el-checkbox>
              <el-checkbox label="审批通过">审批通过</el-checkbox>
              <el-checkbox label="审批不通过">审批不通过</el-checkbox>
              <el-checkbox label="撤销">撤销</el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 表格 -->
          <approvalTool :need-page="needPage" />
        </el-tab-pane>
        <!-- 我发起的 -->
        <el-tab-pane
          class="name"
          label="我发起的"
          name="second"
        >
          <!-- 审批类型 -->
          <div class="type">
            <strong>审批类型：</strong>
            <el-radio
              v-for="item in typeList"
              :key="item.id"
              v-model="content"
              :label="item.name"
              @change="changeOption"
            >{{ item.name }}</el-radio>
          </div>
          <!-- 审批状态 -->
          <div class="state">
            <strong>审批状态：</strong>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="审批中">审批中</el-checkbox>
              <el-checkbox label="审批通过">审批通过</el-checkbox>
              <el-checkbox label="审批不通过">审批不通过</el-checkbox>
              <el-checkbox label="撤销">撤销</el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 表格 -->
          <approvalStart />
        </el-tab-pane>
        <!-- 待审批 -->
        <el-tab-pane
          class="name"
          label="待审批"
          name="third"
        >
          <!-- 审批类型 -->
          <div class="type state" style="margin-bottom:20px">
            <strong>审批类型：</strong>
            <el-radio
              v-for="item in typeList"
              :key="item.id"
              v-model="content"
              :label="item.name"
              @change="changeOption"
            >{{ item.name }}</el-radio>
          </div>
          <approvalIng />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import approvalTool from './components/approval_tool'
import approvalStart from './components/approvalStart'
import approvalIng from './components/approval_ing'
import { getFlowList } from '@/api/approvals'
export default {
  components: {
    approvalTool,
    approvalStart,
    approvalIng
  },
  data() {
    return {
      activeName: 'first',
      typeList: [],
      content: '审批类型',
      checkList: [],
      needPage: {
        page: 1,
        pageSize: 10
        // process_key:,
        // process_state:
      },
      type: ''
    }
  },
  created() {
    this.getFlowList()
    console.log(this.userName)
  },
  methods: {
    changeOption() {
      console.log('_____', this.type)
    },
    async getFlowList() {
      const res = await getFlowList()
      console.log('____', res)
      this.typeList = res
    }
    // handleClick(tab, event) {
    //   console.log(111, tab, event)
    // }
  }
}
</script>

<style lang="scss">
.approvalList {
  margin: 20px;
  .el-tabs__item {
    font-size: 18px;
  }
  .type,
  .state {
    margin-top: 20px;
  }
  .state {
    display: flex;
    margin-bottom: 20px;
  }
}
</style>
